import React, { useState, useEffect } from 'react';
import { filterDateParse, genTabelData } from '../../utils';
import _ from 'lodash';
import InfiniteTable from '../../components/InfiniteTable/index.jsx';
import './index.css';

// 初始化columns配置
const initColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    ellipsis: true,
    fixed: 'left'
  },
  // 1: 男；2：女；
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    width: 100,
    ellipsis: true,
    render: (text, record, index) => {
      let str = '-';
      switch(text) {
        case 1:
          str = '男';
          break;
        case 2:
          str = '女';
          break;
        default:
          break;
      }
      return str;
    }
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    width: 100,
    ellipsis: true,
  },
  {
    title: '教育水平',
    dataIndex: 'educational',
    key: 'educational',
    width: 100,
    ellipsis: true,
  },
  {
    title: '岗位',
    dataIndex: 'job',
    key: 'job',
    width: 100,
    ellipsis: true,
  },
  {
    title: '工作年限',
    dataIndex: 'word_years',
    key: 'word_years',
    width: 100,
    ellipsis: true,
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    width: 100,
    ellipsis: true,
  },
  // 1: 未安排；2：已安排；3：未反馈；4：通过；5：不通过；
  {
    title: '进展',
    dataIndex: 'progress',
    key: 'progress',
    width: 100,
    ellipsis: true,
    render: (text, record, index) => {
      let str = '-';
      switch(text) {
        case 1:
          str = '未安排';
          break;
        case 2:
          str = '已安排';
          break;
        case 3:
          str = '未反馈';
          break;
        case 4:
          str = '通过';
          break;
        case 5:
          str = '不通过';
          break;
        default:
          break;
      }
      return str;
    }
  },
  {
    title: '跟进人',
    dataIndex: 'follower',
    key: 'follower',
    width: 100,
    ellipsis: true,
  },
  {
    title: '负责人',
    dataIndex: 'leader',
    key: 'leader',
    width: 100,
    ellipsis: true,
  },
  // 时间戳（秒）
  {
    title: '新建时间',
    dataIndex: 'created_time',
    key: 'created_time',
    width: 100,
    ellipsis: true,
    render: (text, record, index) => filterDateParse(text)
  },
  // 时间戳（秒）
  {
    title: '修改时间',
    dataIndex: 'updated_time',
    key: 'updated_time',
    width: 100,
    ellipsis: true,
    render: (text, record, index) => filterDateParse(text)
  },
];
// 取本地缓存的columns width
const localColumnsW = window.localStorage.TABLE_COLUMNS_W;
if (localColumnsW) {
  let localColumnsWParse = JSON.parse(localColumnsW);
  _.map(initColumns, (col, index) => {
    col.width = localColumnsWParse[col.dataIndex];
  })
}

// 页面级别组件
function CandidatePage() {
  const [curPage, setCurPage] = useState(1);
  const [dataSource, setDataSource] = useState([]);
  const [tableLoading, setTableLoading] = useState(false);

  // 获取数据
  const getTableData = async (page, per_page) => {
    setTableLoading(true);
    let nextPage = page + 1;
    setCurPage(nextPage);
    // 模拟远程调用
    let data = await genTabelData(page, per_page);
    let newData = _.concat(dataSource, data);
    setDataSource(newData);
    setTableLoading(false);
  }

  // 初次加载
  useEffect(() => {
    if (!dataSource.length) {
      getTableData(1, 30);
    }
  });

  return (
    <div className="candidatePage">
      <h2 className="title">候选人列表</h2>
      <InfiniteTable 
        loadding={tableLoading}
        propsColumns={initColumns}
        dataSource={dataSource}
        onScrollEnd={() => {
          getTableData(curPage, 30);
        }}
        onCellResize={(nextColumns) => {
          // 每次变更单元格宽度，本地缓存columns width
          const tmpObj = {};
          _.map(nextColumns, v => {
            tmpObj[v.dataIndex] = v.width;
          })
          window.localStorage.TABLE_COLUMNS_W = JSON.stringify(tmpObj);
        }}
        />
    </div>
  );
}

export default CandidatePage;
